import React from 'react';
import Router from 'next/router'
import style from '../styles/components/header.module.css'
import { Row, Col, Menu } from 'antd'
import { HomeOutlined, VideoCameraAddOutlined, SmileOutlined } from '@ant-design/icons'

const Header = () => {

    const jump = (e) => {
        if (e.key == 0) {
            Router.push('/')
        } else {
            Router.push('/list?id=' + e.key)
        }
    }
    return (
        <div className={style.header}>
            <Row justify='center'>
                <Col xs={24} sm={24} md={10} lg={15} xl={12}>
                    <span className={style.header_logo}>JSPang</span>
                    <span className={style.header_txt}>React Hooks + Egg.js</span>
                </Col>
                <Col xs={0} sm={0} md={14} lg={8} xl={6}>
                    <Menu mode='horizontal' onClick={jump}>
                        <Menu.Item key='0'>
                            <HomeOutlined />
                            <span>首页</span>
                        </Menu.Item>
                        <Menu.Item key='1'>
                            <VideoCameraAddOutlined />
                            <span>视频教程</span>
                        </Menu.Item>
                        <Menu.Item key='2'>
                            <SmileOutlined />
                            <span>快乐生活</span>
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

export default Header